<template>
  <div>
    <div class="d-flex justify-content-between">
      <h4 class="panel-title">
        <span>我的任务</span>
        <span class="panel-title-num" v-show="taskTotal">{{ taskTotal }}</span>
      </h4>
    </div>

    <el-table :data="tableData" :loading="loading" border class="table-sm">
      <el-table-column label="任务名称" prop="taskName" align="center"></el-table-column>
      <el-table-column label="未处理/已处理" prop="taskCount" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.taskCount }}/{{ scope.row.process }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="showDialog(scope.row)"
            icon="el-icon-edit"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <task-project-approval
      :visible.sync="approvalVisible"
      @success="getData()"
      type="3"
    ></task-project-approval>

    <task-project-item
      :visible.sync="itemVisible"
      @success="getData()"
      type="4"
    ></task-project-item>

    <task-project-investigate
      :visible.sync="investigateVisible"
      type="5,6"
    ></task-project-investigate>

    <task-register-dialog :visible.sync="registerVisible" type="17"></task-register-dialog>

    <task-hnd-approval-dialog :visible.sync="hndVisible"></task-hnd-approval-dialog>

    <task-handle-contract-dialog
      :visible.sync="handleContractVisible"
      type="42"
    ></task-handle-contract-dialog>

    <contrack-approval-dialog :visible.sync="contrackApproval" type="35"></contrack-approval-dialog>

    <loan-approval-dialog :visible.sync="loanApproval" type="36"></loan-approval-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { enumTaskType } from '@/credit/plugins/enumTown'
import TaskProjectApproval from '@/credit/views/county/index/myTask/TaskProjectApproval'
import TaskProjectItem from '@/credit/views/county/index/myTask/TaskProjectItem'
import TaskProjectInvestigate from '@/credit/views/county/index/myTask/TaskProjectInvestigate'
import TaskRegisterDialog from '@/credit/views/county/index/myTask/TaskRegisterDialog'
import TaskHndApprovalDialog from '@/credit/views/city/index/myTask/TaskHndApprovalDialog'

import TaskHandleContractDialog from '@/credit/views/city/index/myTask/TaskHandleContractDialog'
import ContrackApprovalDialog from '@/credit/views/county/index/myTask/ContrackApprovalDialog'
import LoanApprovalDialog from '@/credit/views/county/index/myTask/LoanApprovalDialog'
const enumConcat = {
  56: '调查审批',
  3031323334: '限率评审',
}
export default {
  components: {
    TaskProjectApproval,
    TaskProjectItem,
    TaskProjectInvestigate,
    TaskRegisterDialog,
    // TaskFeePayDialog,
    // TaskFeeArrival,
    // TaskPayment
    // TaskReportDialog
    TaskHndApprovalDialog,
    TaskHandleContractDialog,
    ContrackApprovalDialog,
    LoanApprovalDialog,
  },
  props: {
    height: {
      type: Number,
      default: 300,
    },
  },
  data() {
    return {
      params: {
        index: 1,
        size: 8,
      },
      tableData: [],
      enumTaskType,
      loading: false,
      approvalVisible: false,
      itemVisible: false,
      investigateVisible: false,
      investigateIngVisible: false,
      letterVisible: false,
      contrackVisible: false,
      registerVisible: false,
      feeVisible: false,
      arrivalVisible: false,
      payVisible: false,
      reportVisible: false,
      // 限率评审
      hndVisible: false,
      // 签约处理
      handleContractVisible: false,
      // 合同审批
      contrackApproval: false,
      // 放款审批
      loanApproval: false,
    }
  },
  computed: {
    ...mapGetters(['user', 'myTaskCount']),
    isUserProvince() {
      return this.user.orgRegionLever === 1
    },
    tasks() {
      const data = []
      let mustKeys = this.isUserProvince
        ? [3, 4, 56, 3031323334, 35, 42, 36, 17]
        : [3, 4, 56, 35, 42, 36, 17]
      mustKeys.forEach(item => {
        data.push({
          taskType: item,
          taskName: enumTaskType[item] || enumConcat[item],
          taskCount: this.getNum(item),
          process: this.getProcess(item),
        })
      })

      return data
    },
    totalCount() {
      return this.tasks.length
    },
    taskTotal() {
      return this.tasks.reduce((prev, curr) => prev + curr.taskCount, 0)
    },
  },
  watch: {
    tasks: {
      handler: function () {
        this.setData()
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    getNum(type) {
      switch (type) {
        case 56:
          return this.getTypeNum(5) + this.getTypeNum(6)
        case 3031323334:
          return [30, 31, 32, 33, 34].reduce((p, c) => {
            p += this.getTypeNum(c)
            return p
          }, 0)
        default:
          return this.getTypeNum(type)
      }
    },
    getProcess(type) {
      switch (type) {
        case 56:
          return this.getTypeProcess(5) + this.getTypeProcess(6)
        case 3031323334:
          return [30, 31, 32, 33, 34].reduce((p, c) => {
            p += this.getTypeProcess(c)
            return p
          }, 0)
        default:
          return this.getTypeProcess(type)
      }
    },
    getTypeNum(type) {
      return (this.myTaskCount && this.myTaskCount[type] && +this.myTaskCount[type].num) || 0
    },
    getTypeProcess(type) {
      return (this.myTaskCount && this.myTaskCount[type] && +this.myTaskCount[type].process) || 0
    },
    setData() {
      this.tableData = this.tasks.slice(
        (this.params.index - 1) * this.params.size,
        this.params.index * this.params.size
      )
    },
    async getData() {
      this.loading = true
      await this.$utils.promise(this.$store.dispatch('getMyTaskCount'))
      this.loading = false
    },
    showDialog(row) {
      switch (+row.taskType) {
        case 3:
          this.approvalVisible = true
          break
        case 4:
          this.itemVisible = true
          break
        case 56:
          this.investigateVisible = true
          break
        case 7:
          this.letterVisible = true
          break
        case 8:
          this.contrackVisible = true
          break
        case 17:
          this.registerVisible = true
          break
        // case 10:
        //   this.feeVisible = true
        //   break
        // case 11:
        //   this.arrivalVisible = true
        //   break
        // case 13:
        //   this.reportVisible = true
        //   break
        case 3031323334:
          this.hndVisible = true
          break
        case 35:
          this.contrackApproval = true
          break
        case 36:
          this.loanApproval = true
          break
        case 42:
          this.handleContractVisible = true
          break
        default:
          break
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.panel-title {
  position: relative;
  font-size: 1.142857rem;

  .panel-title-num {
    position: absolute;
    right: -1rem;
    padding: 0 0.21rem;
    border-radius: 1rem;
    background-color: red;
    font-size: 10px;
    color: #fff;
    line-height: 1;
    display: inline-block;
    text-align: center;
  }
}
/deep/ .el-table__header {
  width: 100% !important;
}
/deep/ .el-table__body {
  width: 100% !important;
}
</style>
